<template>
  <div class="server-body" :style="borderStyle">
    <div class="server-header-query">
      <div class="header-query-Body">
        <div class="query-body">
          <input
            v-model="query.blurry"
            :style="borderStyle"
            placeholder="搜索您需要的服务 / Search Service"
            @click="queryObject"
          >
          <div class="query-button" @click="queryObject">
            <i class="el-icon-search" />
          </div>
        </div>
      </div>
    </div>
    <div class="header-query-lab">
      <query-item
        v-for="(item, index) in queryList"
        :key="'query-' + index"
        :layout="layout"
        :params="item"
        @call-back="queryClick"
      />
    </div>
    <div class="server-content-body">
      <el-scrollbar
        style="width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto"
      >
        <el-empty
          v-if="dataList === null || dataList.length === 0"
          :image-size="100"
        />
        <div v-else class="content-body">
          <div
            v-for="(item, index) in dataList"
            :key="'server-li-' + index"
            class="content-ul"
          >
            <div class="content-query">
              <div class="content-query-title">
                {{ item.bmmc }}
                <i
                  class="title-i"
                >({{ item.dataList === null ? 0 : item.dataList.length }})</i>
              </div>
            </div>
            <div class="content-server">
              <div
                v-for="(obj, index) in item.dataList"
                :key="'server-' + index"
                class="custom-right-li"
                @click="openEntity(obj)"
              >
                <el-card
                  shadow="hover"
                  style="height: 100%"
                  :style="borderStyle"
                >
                  <div class="right-li-body">
                    <div class="custom-li-image">
                      <el-image
                        lazy
                        class="custom-image"
                        :src="baseURL + obj.pcIcon"
                      />
                    </div>
                    <div class="custom-li-title">
                      <div class="li-line">{{ obj.name }}</div>
                      <div class="li-line custom-font">
                        {{ obj.ssxtmc + " / " + obj.cjsj }}
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import QueryItem from './slot/item';
import { service, openEntity } from '@/mixins/template';
export default {
  name: 'OfficeHallPcManager',
  components: { QueryItem },
  mixins: [service, openEntity],
  props: {
    temp: {
      type: Object,
      default() {
        return {};
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    layout: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    borderStyle() {
      if (this.temp.sfxsbk === true) {
        return {
          border: '1px solid #eeeeee',
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      if (this.temp.bkyy === true) {
        return {
          boxShadow: '0 2px 4px rgba(0, 0, 0, .12)',
          backgroundColor: this.customStyle.mrzt,
          opacity: this.customStyle.tmd,
          color: this.customStyle.fontColor
        };
      }
      return {
        backgroundColor: this.customStyle.mrzt,
        opacity: this.customStyle.tmd,
        color: this.customStyle.fontColor
      };
    }
  },
  watch: {
    layout: {
      handler(newData, oldData) {
        this.customStyle = newData;
        this.titleStyle = {
          backgroundColor: newData.mrlb,
          opacity: newData.tmd
        };
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    },
    temp: {
      handler(newData, oldData) {
        this.query = {
          blurry: ''
        };
        if (this.showHeader) {
          const pzx = JSON.parse(newData.data.pzx);
          this.column = pzx;
          this.setting = pzx;
        } else {
          const pzx = JSON.parse(newData.pzx);
          this.column = pzx;
          this.setting = pzx;
        }
        if (undefined !== this.column.query && this.column.query !== null) {
          this.queryList = this.column.query;
        } else {
          this.queryList = [];
        }
        this.initData();
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  }
};
</script>

<style scoped>
.server-body {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  padding: 0px 10px;
  box-sizing: border-box;
}
.server-header-query {
  flex: 0 1 auto;
  height: 70px;
}
.server-content-body {
  flex: 1 1 auto;
  overflow: hidden;
}
.header-query-Body {
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding: 10px 0px;
  box-sizing: border-box;
  border-bottom: 1px solid #eeeeee;
}
.query-body {
  width: 500px;
  height: 50px;
  line-height: 40px;
  margin: 0 auto;
  padding: 5px 50px 5px 20px;
  box-sizing: border-box;
  border-radius: 25px;
  border: 1px solid #409eff;
  position: relative;
}

.query-button {
  width: 60px;
  height: 49px;
  background-color: #409eff;
  position: absolute;
  right: 0px;
  top: 0px;
  border-radius: 0px 25px 25px 0px;
  line-height: 49px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  font-size: 20px;
  font-weight: bolder;
}

.query-button:hover {
  background-color: #66b1ff;
}

.query-body input {
  width: 100%;
  height: 40px;
  border: none;
  outline: none;
}

.header-query-lab {
  flex: 0 1 auto;
  min-height: 150px;
}
.custom-right-li {
  cursor: pointer;
}
.right-li-body {
  width: 100%;
  height: 70px;
  display: flex;
  flex-flow: row nowrap;
}
.custom-li-title {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
  padding: 5px 0px;
  box-sizing: border-box;
}
.custom-image {
  width: 40px;
}
.custom-font {
  font-size: 12px;
  color: #8c939d;
}
.li-line {
  flex: 0 1 auto;
  height: 50%;
  padding: 5px;
  box-sizing: border-box;
  text-align: left;
}
.content-ul {
  width: 100%;
  min-height: 200px;
  display: flex;
  flex-flow: column nowrap;
}
.content-query {
  width: 100%;
  height: 45px;
  line-height: 45px;
  position: relative;
  padding: 0px 20px;
  box-sizing: border-box;
}
.content-query-title {
  width: 100%;
  height: 45px;
  line-height: 45px;
  font-size: 16px;
  font-weight: bolder;
  text-align: left;
  border-bottom: 1px solid #eeeeee;
  text-indent: 20px;
}
.content-query-title::before {
  content: " ";
  position: absolute;
  left: 20px;
  top: 10px;
  height: 25px;
  width: 4px;
  border-radius: 2px;
  background-color: #409eff;
}
.title-i {
  font-size: 14px;
  color: #909399;
}
.content-server {
  height: inherit;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.el-scrollbar ::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
  overflow-y: auto;
}

@media screen and (min-width: 1200px) {
  .custom-right-li {
    width: 16.666%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .custom-right-li {
    width: 20%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}

@media screen and (max-width: 1024px) {
  .custom-right-li {
    width: 25%;
    height: 100px;
    align-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
  }
  .custom-li-image {
    flex: 0 1 auto;
    width: 60px;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
  }
  .el-card >>> .el-card__body {
    padding: 5px;
  }
}
</style>
